<template>
  <section class="details">
    <div v-if="!showSwiper">
      <ul class="nav">
        <li v-for="item in details"
            :key="item.id"
            :class="{active : activeMenu === item.id}"
            @click="jump(item.id)">
          <img class="icon" :class="{active : activeMenu === item.id}"  src="@/assets/images/home/location.jpg"/>
          {{ item.name }}
        </li>
      </ul>
      <div id="scrollBox">
        <ul class="box">
          <li class="do-jump">
            <div class="box_1">
              <cube-slide ref="slide" :data="detailsData.banner" @change="changePage">
                <cube-slide-item
                  v-for="(banner, index) in detailsData.banner"
                  :key="index"
                  class="banner"
                  @click.native="clickHandler(banner, index)">
                  <a >
                    <img @click="clickImg" :src="banner.imgUrl">
                  </a>
                </cube-slide-item>
              </cube-slide>
            </div>
          </li>
          <li class="do-jump">
            <div class="box_2">
              <p class="bannerShow" >
                <img v-if="detailsData.labelBanner" :src="detailsData.labelBanner"/>
              </p>
              <div class="price_item">
                <div class="price">
                  <div class="left">
                    <p class="price_1" >￥<span id="price">{{detailsData.price}}</span></p>
                    <div class="price_2">
                      <p>￥{{detailsData.priceRemove}}</p>
                      <div class="logo">
                      <span>
                        <img src=""/>
                      </span>
                        京东秒杀
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <p>距秒杀结束还剩</p>
                    <div id="show"></div>
                  </div>
                </div>
              </div>
              <div class="content">
                <p class="tag">
                  <img src="//img30.360buyimg.com/jdphoto/s102x28_jfs/t1/21715/30/300/2368/5c08cfc0E76d331d3/1b55766b4030f270.png"/>
                  超市顶尖货物轮番抢
                </p>
                <div class="title">
                  <img v-if="detailsData.labelImg" :src="detailsData.labelImg"/>
                  {{detailsData.title}}
                </div>
                <p class="det">【自营火龙果TOP1超值爆款】产地直采，红心果更甜，富含减脂/抗衰美颜/护眼的花青素，美味与美颜健康之选~泰国南部新产季榴莲上市热销中请戳 </p>
              </div>
              <div class="sate">
                <img src=""/>
                优鲜赔
              </div>
            </div>
          </li>
          <li class="do-jump">
            <p class="division"></p>
            <div class="box_3">推荐</div>
          </li>
          <li class="do-jump">
            <div class="box_4">
              <p v-for="items of detailsData.detailsImg" :key="items.id">
                <img v-lazy="items.imgUrl"/>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="showSwiper" @click="backImg"  class="backSlide" @touchmove.prevent="">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banner, index) in detailsData.banner"
            :key="index">
            <img :src="banner.imgUrl"/>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name: 'Details',
  data () {
    return {
      mySwiper: null,
      showIcon: false,
      activeMenu: 0,
      details: [
        {
          id: 0,
          name: '商品'
        },
        {
          id: 1,
          name: '评价'
        },
        {
          id: 2,
          name: '推荐'
        },
        {
          id: 3,
          name: '详情'
        }
      ],
      detailsData: [],
      showSwiper: false
    }
  },
  created () {
    this.getDetailsData(this.$route.params.id)
  },
  updated () { // swiper动态加载数据要用updated  添加数据的时候 实时更新
    this.$nextTick(() => {
      this.getSwiper()
    })
  },
  mounted () {
    // 获取滚动dom元素
    const jump = $('.do-jump')
    const topArr = []
    for (let i = 0; i < jump.length; i++) {
      topArr.push(jump.eq(i).position().top + jump.eq(i).height() - 45) // 当详情页高度大于屏幕高度
      // topArr.push(jump.eq(i).position().top - 41) // 当详情页高度不满屏幕高度的时候就会出错，需要这样写
      // console.log(topArr)
    }
    // 监听dom元素的scroll事件
    let that = this
    window.addEventListener('scroll', () => {
      const currentTop = document.documentElement.scrollTop
      // console.log(currentTop)
      for (let i = 0; i < topArr.length; i++) {
        if (currentTop <= topArr[i]) { // 根据滚动距离判断应该滚动到第几个导航的位置
          // console.log(jump.eq(i).height())
          that.activeMenu = i
          break
        }
      }
    }, true)
    // 倒计时
    this.TimeDown('show', '2020-5-11 24:00:00')
  },
  methods: {
    // 跳转
    jump (index) {
      const jump = $('.do-jump').eq(index)
      const scrollTop = jump.position().top - 44// 获取需要滚动的距离 41是父元素到顶部的距离
      // Chrome
      // window.scrollTo(0, 0) 滚动到顶部
      document.documentElement.scrollTo({
        top: scrollTop,
        behavior: 'smooth' // 平滑滚动
      })
      setTimeout(() => {
        this.activeMenu = index // 当前导航
      }, 500)
    },
    // 获取数据
    async getDetailsData (id) {
      const result = await this.axios.get('/homeClassifyDataList/' + id)
      console.log(result)
      this.detailsData = result
    },
    changePage (current) {
      // console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      // console.log(item, index)
    },
    getSwiper () {
      let that = this
      that.mySwiper = null
      this.mySwiper = new Swiper('.swiper-container', {
        loop: false, // 循环模式选项
        autoplay: false
      })
    },
    clickImg () {
      this.showSwiper = !this.showSwiper
    },
    backImg () {
      this.showSwiper = !this.showSwiper
    },
    TimeDown (id, endDateStr) {
      // 结束时间
      let endDate = new Date(endDateStr)
      // 当前时间
      let nowDate = new Date()
      // console.log(nowDate)
      // 相差的总秒数
      let totalSeconds = parseInt((endDate - nowDate) / 1000)
      // 天数
      let days = Math.floor(totalSeconds / (60 * 60 * 24))
      // 取模（余数）
      let modulo = totalSeconds % (60 * 60 * 24)
      // 小时数
      let hours = Math.floor(modulo / (60 * 60))
      modulo = modulo % (60 * 60)
      // 分钟
      let minutes = Math.floor(modulo / 60)
      // 秒a
      let seconds = modulo % 60
      // 输出到页面
      document.getElementById(id).innerHTML = formatType(hours) + hours + ':' + formatType(minutes) + minutes + ':' + formatType(seconds) + seconds
      // 延迟一秒执行自己
      let that = this
      setTimeout(function () {
        that.TimeDown(id, endDateStr)
      }, 1000)
      // 设置显示格式，小于10的填0
      function formatType (n) {
        return n >= 0 && n < 10 ? '0' : ''
      }
    }
  },
  watch: {
    detailsData () {
      if (this.detailsData.price) {
        this.$nextTick(() => {
          let price = document.getElementById('price') // innerHTML直接输出的文本内容
          // console.log(price.innerText.substring(0, 2)) // innerText直接输出的是<p>文本内若</p>这种格式
          let left = price.innerText.substring(0, 2)
          let right = price.innerText.substring(2)
          document.getElementById('price').innerHTML = '<span style="font-size: 24px">' + left + '</span>' + right
        })
      } else {
        document.getElementById('price').innerHTML = ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../../../../../assets/styl/color.styl'
  .division
    width 100%
    height 10px
    background #e8e8ed
  .details >>> .cube-slide-dots
    bottom 15px
    span
      margin-right 3px
      width 4px
      height 4px
      border-radius 50%
    span.active
      background  #e4393c
  .active
    display inline-block!important
    color #e4393c!important
  .details
    .nav
      position fixed
      top 0
      z-index 99
      width 100%
      background #ffffff
      padding 15px 0
      display flex
      justify-content space-around
      box-shadow 0 2px 6px rgba(0,0,0,.1)
      li
        color #666
        font-size 14px
        .icon
          display none
          width 12px
          margin-bottom -.8px
  #scrollBox
    margin-top 45px
    .box
      .do-jump
        box-sizing border-box
        .box_1
          .cube-slide
            height 375px
        .box_2
          .bannerShow
            height 60px
            width 100%
            overflow hidden
            img
              width 100%
              height 100%
          .price_item
            background #f7f7f7
            .price
              display flex
              width 100%
              height 100%
              align-items center
              justify-content center
              .left
                flex 1
                padding 8px 0
                background -webkit-linear-gradient(left,#ec2f8a,#d73153)
                background linear-gradient(90deg,#ec2f8a,#d73153)
                display flex
                .price_1
                  font-size 16px
                  color #fff
                  display flex
                  align-items center
                  justify-content center
                  margin 0 10px
                  span
                    font-weight 600
                .price_2
                  p
                    font-size 14px
                    color #F6B3CE
                    text-decoration line-through
                    margin-bottom 4px
                  div
                    color #fff
                    position relative;
                    height 15px
                    vertical-align middle // vertical-align 属性设置元素的垂直对齐方式
                    padding 2px 3px 0 18px
                    line-height 15px
                    font-size 12px
                    span
                      position absolute
                      top 0
                      left 0
                      display inline-block
                      background #ffffff
                      width 15px
                      height 15px
                      overflow hidden
                      img
                        width 100%
                        height 100%
                  div:after
                    content ""
                    display block
                    border 1px solid #ddd
                    position absolute
                    top 0
                    bottom 0
                    left 0
                    right 0
                    pointer-events none // 表示在元素上禁用指针事件；此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。
              .right
                width 30%
                text-align center
                p
                  margin-bottom 3px
                  font-size 10px
                  color #333
                #show
                  font-size 15px
                  color #e93b3d
          .content
            padding 10px
            background #ffffff
            .tag
              font-size 12px
              color: #979797
              img
                width 60px
                margin-bottom -3px
            .title
              padding 10px 0
              ellipsis2()
              font-size 16px
              color: #333
              img
                width 25px
            .det
              color #999
              font-size 12px
              line-height 1.2
          .sate
            background #fbf0fd
            padding 12px 10px
            font-size 15px
            color #e93b3d
            img
              width 70px
        .box_3
          height 400px
          font-size 15px
          color #333
          background #fff
        .box_4
          min-height 1200px
          p
            width 100%
            img
              width 100%
  .backSlide
    z-index 999
    background rgba(0, 0, 0, .9)
    position fixed
    top 0
    width 100%
    height 100%
    justify-content center
    align-items center
    display flex
    .swiper-container
      width: 100%
      height: 400px
    .swiper-wrapper
      width: 100%
      height: 100%
    .swiper-slide
      width: 100%
      height: 100%
      img
        width: 100%
        height: 100%
</style>
